<template>
    <div class="container">
        <div class="background">
            <img :src="rectUrl" :class="{ hidden: list.length > 0 }">
            <img :src="logoUrl" class="logo-image" :class="{ hidden: list.length > 0 }">
            <img :src="bgUrl" class="center-image" :class="{ hidden: list.length > 0 }">
            <p class="hello-message" :class="{ hidden: list.length > 0 }">嗨！我是武安医保政策咨询助手</p>
        </div>
        <gua-chat-ui class="chat-ui" :list="list" @updateList="updateList"/>
    </div>
  </template>
  
  <script>
  import rectUrl from '@/assets/rect-DHm00a6N.png';
  import logoUrl from '@/assets/wa_20250313201632.png';
  import bgUrl from '@/assets/WechatIMG75.jpg';
  import GuaChatUi from './GuaChatUi.vue'

  export default {
    name: 'ChatView',
    components: {
        GuaChatUi,
    },
    data() {
        return {
            rectUrl,
            logoUrl,
            bgUrl,
            showBackground: true,
            list: [],
        }
    },
    methods: {
        scrollToDown() {
            this.$nextTick(()=> {
                var element = document.getElementsByClassName('chat-list')[0];
                element && element.scrollTo(0, element.scrollHeight);
            })
        },
        updateList(content, type, role = 'user', loading) {
            if (type === 'add') {
                this.list.push({
                    role,
                    content,
                    key: new Date().getTime(),
                    loading: role === 'user' ? false : true,
                });
                this.scrollToDown();
            } else if (type === 'joint') {
                const item = this.list[this.list.length - 1];
                const contentInner = item.content + content;
                this.list.splice(this.list.length - 1, 1, {
                    role: item.role,
                    content: contentInner,
                    key: new Date().getTime(),
                    loading,
                });
                this.scrollToDown();
            } else if (type === 'clear') {
                this.list = [];
            } else if (type === 'delete') {
                console.log(content);
                const index = this.list.findIndex(d => d.key === content.key);
                this.list.splice(index, 1);
            }
        },
    },
  }
  </script>
  
  <style scoped>
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff;
        overflow: auto;
    }
    .hidden {
        visibility: hidden;
    }
    .background, .chat-ui {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .chat-ui {
        --gua-chat-font-suze: 15px;
        --gua-chat-gap: 10px;
        --gua-chat-padding: 10px;
        --gua-chat-avatar-size: 25px;
        z-index: 3;
    }
    .background img:first-child {
        width: 100%;
        height: 80%;
        object-fit: cover;
        z-index: 1;
    }
    .logo-image {
        position: absolute;
        width: 40%;
        height: 2.5%;
        top: 5%;
        left: 15%;
        transform: translate(-15%, -5%);
        z-index: 2;
    }
    .center-image {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
        z-index: 2;
    }
    .hello-message {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -35%);
        z-index: 2;
        width: 100%;
        font-weight: 700;
        font-size: 18px;
        color: #000000;
    }
  </style>
  